<template>
    <div class="content">
        <div class="header">
            <span class="left" @click="$router.back()">
                &lt;
            </span>
            <span class="right">注册 </span>
        </div>

        <van-cell-group inset>
            <van-field v-model="username" required label="用户名" placeholder="请输入用户名" />
            <van-field v-model="phone_number" required label="手机号" placeholder="请输入手机号" />
            <van-field v-model="password" required label="密码" placeholder="请输入密码" />
            <van-button type="primary" size="large" @click="registerClick">注册</van-button>
        </van-cell-group>


    </div>
</template>

<script lang="ts" setup>
import { showToast } from 'vant';
import { ref, type Ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { registerFn } from '@/API/register';
import { error } from 'console';

const router = useRouter()
const username = ref('')
const phone_number = ref<number>()
const password = ref('')

function registerClick() {
    // 转成字符串获取长度
    if (phone_number.value && phone_number.value.toString().length !== 11) {
        showToast('手机号长度不对')
    } else {
        registerFn({
            phone_number: phone_number.value as number,
            password: password.value,
            username: username.value
        }).then(res => {
            if (res.data.message == '注册成功!') {
                router.push('/login')
                showToast(res.data.message);
            }
            console.log(res)
        }).catch(error => {
            if (error.response.status) {
                showToast(error.response.data.message);
            }

            console.log(error)
        })
    }


    // axios.post('http://127.0.0.1:3100/register' ,{
    //     phone_number:phone_number.value as number ,
    //     password: password.value,
    //     username: username.value
    // }).then(res =>{
    //     console.log(res)
    // })
}
</script>


<style scoped lang="scss">
.header {
    width: 100%;
    background-color: #ccc;
    display: flex;
    align-items: center;

    .right {
        flex: 1;
        // background-color: red;
        text-align: center;
    }

    .left {
        margin-left: 5px;
    }
}
</style>